<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表情包</title>
</head>
<style>
    .faces1 {
        width: 500px;
        height: 300px;
        margin: 50px 50px;
    }
    
    .facea {
        border-radius: 50%;
        width: 80px;
        height: 80px;
        background-color: #e0cc60;
        position: relative;
        float: left;
        margin-right: 40px;
        margin-bottom: 40px;
    }
    
    .facea-box {
        border-radius: 50%;
        width: 72px;
        height: 72px;
        background-color: #f1dc67;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .eyea-left {
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background-color: #98560f;
        position: absolute;
        left: 17px;
        top: 23px;
    }
    
    .eyea-right {
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background-color: #98560f;
        position: absolute;
        left: 55px;
        top: 23px;
    }
    
    .moutha {
        border-radius: 0 0 50px 50px;
        width: 50px;
        height: 25px;
        background-color: #98560f;
        position: absolute;
        left: 15px;
        top: 40px;
        overflow: hidden;
    }
    
    .tonguea {
        width: 50px;
        height: 5px;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .tootha {
        border-radius: 50px 50px 0 0;
        width: 30px;
        height: 15px;
        position: absolute;
        bottom: 0;
        left: 10px;
        background-color: #d7a92a;
    }
    
    .mouthb {
        border-radius: 50px 50px 0 0;
        width: 50px;
        height: 25px;
        background-color: #98560f;
        position: absolute;
        left: 15px;
        top: 35px;
        overflow: hidden;
    }
    
    .toothb {
        border-radius: 50px 50px 0 0;
        width: 30px;
        height: 20px;
        background-color: #d7a92a;
        position: absolute;
        left: 10px;
        top: 10px;
        overflow: hidden;
    }
    
    .mouthc {
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background-color: #98560f;
        position: absolute;
        left: 32px;
        top: 40px;
        overflow: hidden;
    }
    
    .mouthd {
        border-radius: 0 0 50px 50px;
        width: 40px;
        height: 20px;
        background-color: #f1dc67;
        position: absolute;
        left: 5px;
        top: 0;
        overflow: hidden;
    }
    
    .mouthe {
        width: 50px;
        height: 3px;
        background-color: #98560f;
        position: absolute;
        left: 15px;
        top: 50px;
    }
    
    .mouthf {
        border-radius: 0 0 50px 50px;
        width: 30px;
        height: 15px;
        position: absolute;
        bottom: 16px;
        left: 25px;
        background-color: #98560f;
        overflow: hidden;
    }
    
    .toothd {
        border-radius: 50px 50px 0 0;
        width: 20px;
        height: 10px;
        position: absolute;
        bottom: 0;
        left: 5px;
        background-color: #d7a92a;
    }
    
    .red1 {
        background-color: #d15555;
    }
    
    .red2 {
        background-color: #e15c5c;
    }
    
    .mouthz {
        width: 20px;
        height: 5px;
        position: absolute;
        bottom: 18px;
        left: 30px;
        background-color: #7e2525;
    }
    
    .brow-left {
        transform: rotate(30deg);
        width: 15px;
        height: 4px;
        background-color: #7e2525;
        position: absolute;
        left: 14px;
        top: 21px;
    }
    
    .brow-right {
        transform: rotate(150deg);
        width: 15px;
        height: 4px;
        background-color: #7e2525;
        position: absolute;
        left: 52px;
        top: 21px;
    }
    
    .eye-left2 {
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background-color: #e15c5c;
        position: absolute;
        left: 23px;
        top: 20px;
    }
    
    .eye-left3 {
        transform: rotate(17deg);
        width: 8px;
        height: 8px;
        background-color: #e15c5c;
        position: absolute;
        left: 22px;
        top: 25px;
    }
    
    .eye-right2 {
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background-color: #e15c5c;
        position: absolute;
        left: 48px;
        top: 20px;
    }
    
    .eye-right3 {
        transform: rotate(72deg);
        width: 8px;
        height: 8px;
        background-color: #e15c5c;
        position: absolute;
        left: 50px;
        top: 25px;
    }
    
    .eyea-left-ping {
        background-color: #e15c5c;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        left: 17px;
        top: 23px;
    }
    
    .eyea-right-ping {
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background-color: #e15c5c;
        position: absolute;
        left: 55px;
        top: 23px;
    }
    
    .eyea-left-black {
        background-color: #7e2525;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        left: 17px;
        top: 23px;
    }
    
    .eyea-right-black {
        background-color: #7e2525;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        position: absolute;
        left: 55px;
        top: 23px;
    }
    
    .facea:hover .eyea-left,
    .facea:hover .eyea-right {
        width: 5px;
        height: 5px;
    }
    
    .facea:hover .moutha {
        animation-name: mouth;
        animation-duration: 1s;
        animation-iteration-count: 10;
    }
    
    @keyframes mouth {
        0% {
            transform: translateY(3px);
        }
        30% {
            transform: translateY(-3px);
        }
        60% {
            transform: translateY(3px);
        }
        100% {
            transform: translateY(0px);
        }
    }
</style>
<div class="faces1">
    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left"></div>
            <div class="eyea-right"></div>
            <div class="moutha">
                <div class="tonguea"></div>
                <div class="tootha"></div>
            </div>
        </div>
    </div>
    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left"></div>
            <div class="eyea-right"></div>
            <div class="mouthb">
                <div class="toothb"></div>
            </div>
        </div>
    </div>
    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left"></div>
            <div class="eyea-right"></div>
            <div class="mouthc">
            </div>
        </div>
    </div>
    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left"></div>
            <div class="eyea-right"></div>
            <div class="moutha">
                <div class="tootha"></div>
            </div>
        </div>
    </div>


    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left"></div>
            <div class="eyea-right"></div>
            <div class="moutha">
                <div class="mouthd">

                </div>
            </div>
        </div>
    </div>
    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left"></div>
            <div class="eyea-right"></div>
            <div class="mouthe">
            </div>
        </div>
    </div>
    <div class="facea">
        <div class="facea-box">
            <div class="eyea-left-ping"></div>
            <div class="eye-left2"></div>
            <div class="eye-left3"></div>
            <div class="eyea-right-ping"></div>
            <div class="eye-right2"></div>
            <div class="eye-right3"></div>
            <div class="mouthf">
                <div class="toothd"></div>
            </div>
        </div>
    </div>
    <div class="facea red1">
        <div class="facea-box red2">
            <div class="brow-left"></div>
            <div class="eyea-left-black"></div>
            <div class="brow-right"></div>
            <div class="eyea-right-black"></div>
            <div class="mouthz">
            </div>
        </div>
    </div>
</div>

</body>

</html>